<!--
 * @Author       : qwguo
 * @description  : description
 * @Date         : 2020-11-05 14:42:57
 * @LastEditors  : qwguo
 * @LastEditTime : 2020-11-11 22:25:27
 * @FilePath     : /mlcc_web_project/mlcc-web-project/src/views/group-order/components/drawer-info.vue
-->
<template>
    <div class="GO-drawer-info-wrap">
        <h5 class="item-title">
            <span>公司已添加产品</span>
        </h5>
        <!--部门数据列表 start-->
        <el-table :data="haveProTableData" style="width: 100%" class="staff-table">
            <el-table-column width="50px" align="center">
                <template slot-scope="props">
                    <el-checkbox v-model="props.row.checked"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column prop="number" label="序号" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center"></el-table-column>
            <el-table-column prop="proType" label="品类" align="center"></el-table-column>
            <el-table-column prop="operate" label="操作" align="center">
                <template slot-scope="props">
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--部门数据列表 end-->
    </div>
</template>

<script>
    import { getProductlist } from '@/api/group-order';
    export default {
        name: 'drawer-info',
        data() {
            return {
                //部门列表数据
                haveProTableData: [
                    {
                        checked: false,
                        number: '1',
                        sex: '男',
                        proType: '西服上衣'
                    },
                    {
                        checked: false,
                        number: '1',
                        sex: '男',
                        proType: '西服上衣'
                    },
                    {
                        checked: false,
                        number: '1',
                        sex: '男',
                        proType: '西服上衣'
                    },
                    {
                        checked: false,
                        number: '1',
                        sex: '男',
                        proType: '西服上衣'
                    },
                    {
                        checked: false,
                        number: '1',
                        sex: '男',
                        proType: '西服上衣'
                    },
                    {
                        checked: false,
                        number: '1',
                        sex: '男',
                        proType: '西服上衣'
                    }
                ]
            };
        },
        created() {
            getProductlist({
                pageSize: 10,
                pageNo: 1
            }).then(res => {
                console.log(res);
            });
        }
    };
</script>

<style lang="scss">
    .GO-drawer-info-wrap {
        padding: 20px;
        .item-title {
            height: 27px;
            border-left: 5px solid #6f6f6f;
            display: flex;
            align-items: center;
            margin: 0 0 20px 0;
            font-weight: 400;

            span {
                margin-left: 24px;
                font-size: 15px;
            }
        }
        .staff-table {
            thead {
                th {
                    background-color: #3c3c3c;
                    color: #fcec83;
                    border-right: 1px solid #fff;
                }
            }
            tbody {
                td {
                    background-color: #f9f9f9;
                    border-right: 1px solid #fff;
                }
            }
        }
    }
</style>
